<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
		<div>
			<p>
				<input type="text" v-model="searchName">
			</p>
			<p v-for="(item, index) in filterPersons" :key="item.id">
				<span>{{item.id}}</span>
				-----------
				<span>{{item.name}}</span>
				-----------
				<span>{{item.age}}</span>
			</p>

			<p>
				<button @click="setSortType(1)">年龄升序</button>
				<button @click="setSortType(2)">年龄降序</button>
				<button @click="setSortType(0)">原有排序</button>
			</p>
		</div>

	</div>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				searchName: '',
				sortType: 0,
				persons : [
					{id: 1, name: 'jack', age: 19},
					{id: 2, name: 'pert', age: 21},
					{id: 3, name: 'jams', age: 28},
					{id: 4, name: 'krly', age: 30}
				]
			},
			computed: {
				filterPersons: function() {
					const {persons, searchName, sortType} = this;

					// 过滤
					let filterPersons = [];
					filterPersons = persons.filter((p) => {
						return p.name.indexOf(searchName) >= 0? true: false;
					});

					// 排序
					filterPersons.sort(function(p1, p2){
						if (sortType != 0) {
							if (sortType == 1) {
								return p1.age - p2.age;
							} else {
								return p2.age - p1.age;
							}
						}
					})

					return filterPersons;
				}
			},
			methods: {
				setSortType: function (type) {
					this.sortType = type;
				} 
			}
		});
	</script>
</body>
</html>